<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="styles/main.css" rel="stylesheet" />

    <script src="cordova.js"></script>
    <script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

    <script src="scripts/login.js"></script>
    <script src="scripts/location.js"></script>
    <script src="scripts/weather.js"></script>
    <script src="scripts/app.js"></script>

</head>
<body>
    <!--Home-->
    <div id="tabstrip-home"
        data-role="view"
        data-title="Home">

        <div class="view-content">
            <h1>Welcome!</h1>
            <a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>
            <p>
                Icenium&trade; enables you to build cross-platform device applications regardless of your
                    development platform by combining the convenience of a local development toolset with the
                    power and flexibility of the cloud.
            </p>
            <div class="img"></div>
        </div>
    </div>

    <!--Login-->
    <div id="tabstrip-login"
        data-role="view"
        data-title="Login"
        data-model="app.loginService.viewModel">

        <div class="view-content">
            <div class="logo"></div>
            <h3 data-bind="invisible: isLoggedIn">Enter your credentials:</h3>
            <h1 class="welcome" data-bind="visible: isLoggedIn">Welcome, <span data-bind="text: username"></span>!
            </h1>
            <div class="buttonArea">
                <input type="submit" id="logout" data-role="button" data-bind="click: onLogout, visible: isLoggedIn" class="login-button" value="Logout" />
            </div>

            <form data-bind="events: { keyup: checkEnter }">
                <ul data-role="listview" data-style="inset" data-bind="invisible: isLoggedIn">
                    <li>
                        <label>
                            Username
                                <input type="text" data-bind="value: username" />
                        </label>
                    </li>
                    <li>
                        <label>
                            Password
                                <input type="password" data-bind="value: password" />
                        </label>
                    </li>
                </ul>

                <div class="buttonArea">
                    <input type="submit" id="login" data-role="button" data-bind="click: onLogin, invisible: isLoggedIn" class="login-button" value="Login" />
                </div>
            </form>
        </div>

    </div>

    <!--Location-->
    <div id="tabstrip-location"
        data-role="view"
        data-title="Location"
        data-init="app.locationService.initLocation"
        data-show="app.locationService.show"
        data-hide="app.locationService.hide"
        data-model="app.locationService.viewModel"
        data-stretch="true">

        <div id="no-map" data-bind="invisible: isGoogleMapsInitialized">
            Location requires internet connection to display the map.
        </div>
        <div id="map-search-wrap" data-bind="visible: isGoogleMapsInitialized">
            <button id="map-navigate-home" data-bind="click: onNavigateHome"></button>
            <form onsubmit="return false;">
                <input id="map-address" type="search" data-bind="value: address" placeholder="Address" />
                <input id="map-search" type="submit" value="" data-bind="click: onSearchAddress" />
            </form>
        </div>
        <div id="map-canvas" data-bind="visible: isGoogleMapsInitialized"></div>

    </div>

    <!--Weather-->
    <div id="tabstrip-weather"
        data-role="view"
        data-title="Weather"
        data-model="app.weatherService.viewModel">

        <div class="weather">
            <p class="weather-title">20-Day Forecast</p>

            <div class="separator">
                <div class="dark"></div>
                <div class="light"></div>
            </div>

            <ul class="forecast-list"
                data-role="listview"
                data-bind="source: weatherDataSource"
                data-template="weather-forecast-template">
            </ul>
        </div>
    </div>

    <!--Weather forecast template-->
    <script type="text/x-kendo-tmpl" id="weather-forecast-template">
        <div>
            <div class="position-left">
                <span class="weather-info date">${day}</span>
            </div>
            <div class="position-right">
                <span class="weather-info temperature high">${highTemperature}<sup>&deg;</sup></span>
                <span class="weather-info temperature low">${lowTemperature}<sup>&deg;</sup></span>
            </div>
            <div class="position-center">
                <span class="weather-icon ${image}"></span>
            </div>
        </div>
    </script>

    <!--Layout-->
    <div data-role="layout" data-id="tabstrip-layout">

        <!--Header-->
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>

        <!--Footer-->
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#tabstrip-home" data-icon="home">Home</a>
                <a href="#tabstrip-login" data-icon="contacts">Login</a>
                <a href="#tabstrip-location" data-icon="search">Location</a>
                <a href="#tabstrip-weather" data-icon="globe">Weather</a>
            </div>
        </div>
    </div>
</body>
</html>
